<template>
	<view class="pageItem">
		<view class="card">
			<view class="c_msg">
				<image class="c_m_img" src="/static/other/diamond_mini.png" mode="widthFix"></image>
				<view class="c_m_t">{{$t('diamond.current_diamond')}}:</view>
				<view class="c_m_num">{{userInfo.score||'0.00'}}</view>
			</view>
			<view class="c_tit">{{$t('diamond.exchange_number')}}</view>
			<input class="c_input" type="digit" v-model="change_num" placeholder="0.00" />
			<view class="c_tip">{{$t('diamond.exchange_explain')}}</view>
			<view class="c_btn sub" @click="to_change()">{{$t('diamond.exchange_now')}}</view>
		</view>
		<view class="main">
			<view class="main_con">
				<view class="m_tit">
				{{$t('diamond.red_envelope_detail')}}
				<view class="time">
					<picker mode="date" fields="month" @change="dateChange" :value="date">
						<label>{{date}}</label>
					</picker>
				</view>
				</view>
				<scroll-view class="list_item" scroll-y :show-scrollbar="false" enhanced @scrolltolower="loadMore">
					<block v-for="(item,index) in list" :key="'r_'+index">
						<view class="row">
							<view class="r_con">
								<view class="r_c_t1">
									{{item.score}}
									<image class="img" src="/static/other/diamond_mini.png" mode="widthFix"></image>
									{{$t('diamond.red_envelope_row')}}
								</view>
								<view class="r_c_t2">{{item.change_time|formatTime}}</view>
							</view>
							<view class="r_num">
								<label class="num">+{{$t('use.money_code')}}{{item.account}}</label>
							</view>
						</view>
					</block>
				</scroll-view>
				<block v-if="empty_show">
					<view style="width:100%;margin-top: 20vw;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -90%);" v-if="list.length==0">
						<u-empty mode="list" iconSize="120"  :text="$t('nodata')" ></u-empty>
					</view>
				</block>
			</view>
		</view>
		<view class="mask" :class="mask ? 'mask_active':''">
			<view class="mask_item">
				<view class="mask_box_center mask_box" :class="mask ? 'mask_box_active_center':''">
					<view class="m_tit">{{$t('diamond.exchange_success')}}</view>
					<view class="m_con">
						<image class="m_c_bg" src="/static/img/package_bg.png"></image>
						<view class="m_c_num">
							{{$t('use.money_code')}}
							<text>{{change_money}}</text>
						</view>
					</view>
					<view class="m_btn" @click="maskChange(false)">{{$t('use.know')}}</view>
				</view>
			</view>
		</view>
		<view class="bg_item"></view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import helper from '@/common/helper.js';
	import { getNowDate } from '@/common/public.js'
	export default {
		data() {
			return {
				date:'',
				change_num: '',
				change_money: '0.00',
				mask: false,
				page: 1,
				empty_show: 0,
				loading: 0,
				load_type: 'more',
				list: []
			};
		},
		onReachBottom() {
			this.loadData();
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
			this.date = getNowDate();
			this.loadData();
		},
		methods: {
			dateChange(e){
				this.date = e.detail.value;
				this.pageinit();
			},
			pageinit(){
				this.load_type = 'more';
				this.page = 1;
				this.list = [];
				this.loadData();
			},
			loadData() {
				if (this.load_type === 'loading' || this.load_type === 'no_more') {
					//防止重复加载
					return;
				}
				this.load_type = 'loading';
				let date = this.date.split('-');
				let url = this.site_url + 'api/auth/member/my_score_list_11?page=' + this.page+'&ym='+date.join('');
				this.areq(url).then(res => {
					this.empty_show = 1;
					this.loading = 1;
					if (res.code == 1) {
						this.page++;
						this.list = [...this.list, ...res.data];
						if (res.data.length == 10) {
							this.load_type = 'more';
						} else {
							this.load_type = 'no_more';
						}
					} else {
						this.load_type = 'no_more';
					}
				})
			},
			loadMore() {
				console.log('更多数据')
			},
			maskChange(_flag){
				this.mask = _flag;
			},
			to_change(_flag) {
				try {
					if (this.change_num <= 0) {
						throw this.$t('system.tip7');
					}
					uni.$u.throttle( this.real_change, 1800)
				} catch (err) {
					this.showMsg(err);
				}	
			},
			real_change(id){
				uni.showLoading({
					mask: true
				});
				helper.Timer.start();
				let url = this.site_url + 'api/auth/member/score_change_hanle?change_score='+this.change_num;
				this.areq(url).then(res=>{
					helper.Timer.stop();
					let left_time = helper.Timer.getLeftTime(2000);
					setTimeout(()=>{
						uni.hideLoading();
						if(res.code == 1){
							//this.showMsg('兑换成功', 2000, true, 'success');
							this.change_money = res.data.money;
							uni.$emit('auto_update');
							this.mask = true;
							setTimeout(() => {
								this.pageinit();
							}, 1500)
						}else{
							this.showMsg(res.msg);
						}
					},left_time);	
						
				})
			},
		}
	}
</script>

<style lang="scss">
	.pageItem {
		padding-bottom: 0;
	}

	.bg_item {
		@include bg_item(90vw);
	}

	.card {
		@include card_style();
		width: 92%;
		margin-left: 4%;
		position: relative;
		z-index: 2;

		.c_msg {
			width: 100%;
			display: flex;
			align-items: center;

			.c_m_img {
				width: 5vw;
			}

			.c_m_t {
				font-size: 4vw;
				font-weight: bold;
				color: $main_color5;
				padding: 0 1vw;
			}

			.c_m_num {
				font-size: 4vw;
				color: $price_color;
			}
		}

		.c_tit {
			width: 100%;
			padding: 4vw 3vw 2.5vw;
			position: relative;
			font-size: 4vw;
			font-weight: bold;
			color: $main_color_s2;

			&::after {
				content: '';
				position: absolute;
				width: 1vw;
				height: 4.5vw;
				top: 56%;
				transform: translateY(-50%);
				left: 0;
				background: $main_color;
			}
		}

		.c_input {
			height: 13vw;
			line-height: 13vw;
			font-size: 5vw;
			padding: 0 4vw;
			border-radius: 2vw;
			background: $main_bg_color;
			color: $main_color5;
		}

		.c_tip {
			font-size: 3.2vw;
			color: $main_color;
			padding-top: 3vw;
		}

		.c_btn {
			width: 100%;
			height: 13vw;
			line-height: 13vw;
			text-align: center;
			font-size: 4.2vw;
			color: #fff;
			font-weight: bold;
			background: $main_color_s2;
			border-radius: 2vw;
			margin-top: 3vw;
		}
	}

	.main {
		width: 100%;
		position: relative;
		z-index: 2;
		padding: 4vw 4% 0;

		.main_con {
			@include card_style();

			.m_tit {
				width: 100%;
				padding: 2vw 0;
				border-bottom: 1rpx solid #5a5a5a;
				font-size: 4.3vw;
				font-weight: bold;
				color: $main_color5;
				position: relative;
				.time{
					position: absolute;
					right: 0;
					padding: 1vw 3vw;
					font-size: 3vw;
					color: #222;
					background: #efefef;
					border-radius: 4vw;
					bottom: 2vw;
					font-weight: 400;
				}
			}

			.list_item {
				width: 100%;
				height: calc(100vh - var(--status-bar-height) - 104vw);
				margin-top: 3vw;

				.row:not(:first-child) {
					margin-top: 2vw;
				}

				.row {
					width: 100%;
					padding: 2vw 0;
					display: flex;
					align-items: center;

					.r_con {
						flex: 1;

						.r_c_t1 {
							width: 100%;
							font-size: 4vw;
							font-weight: bold;
							@include text_over_style(1);
							color: $main_color5;

							.img {
								width: 3.5vw;
								margin: 0 1vw;
							}
						}

						.r_c_t2 {
							width: 100%;
							color: $main_color4;
							font-size: 3.3vw;
							padding-top: 2vw;
						}
					}

					.r_num {
						font-size: 5vw;
						font-weight: bold;

						.num {
							color: $price_color;
						}
					}
				}
			}
		}
	}

	@include animation_mask_style();

	.mask {
		.mask_box {
			width: 70%;
			margin-left: 15%;
			background: linear-gradient(0deg, #FEFEFB 0%, #FFFFFE 51%, #FDF8DB 100%);
			padding: 6vw 3vw;

			.m_tit {
				width: 100%;
				font-size: 5vw;
				color: #8E3713;
				font-weight: bold;
				text-align: center;
			}

			.m_con {
				width: 100%;
				position: relative;
				margin-top: 5vw;
				height: 32vw;
				width: 35vw;
				margin-left: 50%;
				transform: translateX(-50%);

				.m_c_bg {
					position: absolute;
					width: 35vw;
					height: 32vw;
					top: 0;
					left: 0;
					z-index: 1;
				}

				.m_c_num {
					width: 35vw;
					text-align: center;
					position: relative;
					z-index: 2;
					padding-top: 19vw;
					font-size: 6vw;
					color: #FEEBCB;
				}
			}

			.m_btn {
				margin-top: 4vw;
				width: 60%;
				margin-left: 20%;
				height: 12vw;
				line-height: 12vw;
				color: #FCF1D4;
				font-size: 4.2vw;
				text-align: center;
				background: linear-gradient(90deg, #EA4225 0%, #ED722E 100%);
				border-radius: 6vw;
			}
		}
	}
</style>